<!--新增/编辑部门-->
<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    :title="title"
    :append-to-body="true"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    @closed="closedDialog"
  >
    <p slot="title">{{ title }}</p>

    <el-form
      ref="formData"
      class="base-pipeline-layout system-department-form"
      :class="{ english: $i18n.locale === 'en' }"
      :rules="formRules"
      :model="formData"
      :label-width="$i18n.locale === 'en' ? '160px' : '100px'"
    >
      <el-form-item :label="dataList.SuperiorDepartment" prop="parentId">
        <BaseTreeSelect
          v-model="formData.parentId"
          :tree-data="departmentData"
          :placeholder="dataList.SelectSuperiorDepartment"
        />
      </el-form-item>

      <el-form-item :label="dataList.DepartmentName" prop="name">
        <el-input
          v-if="!readOnly"
          v-model="formData.name"
          :placeholder="dataList.EnterDepartmentName"
        />
        <p v-else class="relay-only-value">{{ formData.name }}</p>
      </el-form-item>
      <el-form-item :label="dataList.EDepartmentName" prop="eName">
        <el-input
          v-if="!readOnly"
          v-model="formData.eName"
          :placeholder="dataList.EnterEDepartmentName"
        />
        <p v-else class="relay-only-value">{{ formData.eName }}</p>
      </el-form-item>
      <el-form-item :label="dataList.FullNameDepartment" prop="fullName">
        <el-input
          v-if="!readOnly"
          v-model="formData.fullName"
          :placeholder="dataList.EnterFullNameDepartment"
        />
        <p v-else class="relay-only-value">{{ formData.fullName }}</p>
      </el-form-item>
      <el-form-item :label="dataList.EFullNameDepartment" prop="eFullName">
        <el-input
          v-if="!readOnly"
          v-model="formData.eFullName"
          :placeholder="dataList.EnterEFullNameDepartment"
        />
        <p v-else class="relay-only-value">{{ formData.eFullName }}</p>
      </el-form-item>
      <el-form-item :label="dataList.DepartmentAttribute" prop="attribute">
        <el-select
          v-model="formData.attribute"
          :disabled="readOnly"
          :placeholder="dataList.SelectDepartmentAttribute"
        >
          <el-option :label="dataList.Corporation" value="0" />
          <el-option :label="dataList.department" value="1" />
        </el-select>
      </el-form-item>

      <el-form-item :label="dataList.Sort" prop="sort">
        <el-input
          v-if="!readOnly"
          v-model="formData.sort"
          :placeholder="dataList.Sort"
        />
        <p v-else class="relay-only-value">{{ formData.sort }}</p>
      </el-form-item>
      <el-form-item :label="dataList.status" :disabled="readOnly" prop="status">
        <el-switch
          v-model="formData.status"
          :disabled="readOnly"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
    </el-form>

    <span slot="footer" class="base-dialog-footer">
      <el-button
        v-if="!readOnly"
        v-loading="submitLoad"
        :disabled="submitLoad"
        type="primary"
        @click="submitForm"
        >{{ btn.Save }}</el-button
      >
      <el-button @click="handleClose">{{
        readOnly
          ? this.$t("Permission.buttons.Off")
          : this.$t("Permission.buttons.Cancel")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  departmentInfo,
  departmentUpdate,
  departmentCreate,
  departmentTree,
} from "../../../api/Permission/PermissionDepartment.js";

import { formatData } from "../../../utils/index";

export default {
  name: "PermissionDepartmentDialog",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
    parentId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      title: "",
      dialogVisible: false,
      submitLoad: false,
      formData: {
        attribute: "",
        sort: 0,
        fullName: "",
        eFullName: "",
        name: "",
        eName: "",
        parentId: 0,
        status: 1,
      },
      formRules: {
        name: [
          {
            required: true,
            message: this.$t("Permission.PermissionUser.EnterDepartmentName"),
          },
        ],
        fullName: [
          {
            required: true,
            message: this.$t(
              "Permission.PermissionUser.EnterFullNameDepartment"
            ),
          },
        ],
        eName: [
          {
            required: true,
            message: this.$t("Permission.PermissionUser.EnterDepartmentName"),
          },
        ],
        eFullName: [
          {
            required: true,
            message: this.$t(
              "Permission.PermissionUser.EnterFullNameDepartment"
            ),
          },
        ],
        parentId: [
          {
            required: true,
            message: this.$t(
              "Permission.PermissionUser.SelectSuperiorDepartment"
            ),
          },
        ],
        attribute: [
          {
            required: true,
            message: this.$t(
              "Permission.PermissionUser.SelectDepartmentAttribute"
            ),
          },
        ],
      },
      departmentData: [],
      attributeOption: [],
    };
  },
  computed: {
    btn() {
      return this.$t("Permission.buttons");
    },
    dataList() {
      return this.$t("Permission.PermissionUser");
    },
  },
  watch: {
    value() {
      this.dialogVisible = this.value;
      if (this.value) {
        this.init();
      }
    },
  },
  created() {},
  methods: {
    // 初始化
    async init() {
      // 等待数据项请求会完成 防止无法默认选中
      await this.getOption();
      this.formData.parentId = this.parentId;
      // editId 存在表示编辑 不存在表示新增
      this.title = this.editId
        ? this.$t("Permission.buttons.Edit")
        : this.$t("Permission.buttons.Add");

      // 编辑 先获取信息
      if (this.editId) {
        // 获取信息
        departmentInfo({ id: this.editId }).then((res) => {
          this.formData.attribute = res.data.attribute === 0 ? "0" : "1";
          this.formData.sort = res.data.sort;
          this.formData.fullName = res.data.fullName;
          this.formData.name = res.data.name;
          this.formData.eFullName = res.data.eFullName;
          this.formData.eName = res.data.eName;
          this.formData.parentId = res.data.parentId;
          this.formData.status = res.data.status;
        });
      }
    },
    // 提交表单
    submitForm() {
      // 校验表单必填项
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.submitLoad = true;
          // 当前编辑ID是否存在 存在则去更新信息
          if (this.editId) {
            this.editAPI(this.formData);
          } else {
            // 新增
            this.addAPI(this.formData);
          }
        } else {
          this.$message.error(this.$t("Permission.buttons.PleaseComplete"));
        }
      });
    },
    // 新增接口
    addAPI(data) {
      departmentCreate(data)
        .then(() => {
          this.SuccessfulOperation();
        })
        .catch(() => {
          this.submitLoad = false;
        });
    },
    // 编辑接口
    editAPI(data) {
      departmentUpdate({
        ...data,
        id: this.editId,
      })
        .then(() => {
          this.SuccessfulOperation();
        })
        .catch(() => {
          this.submitLoad = false;
        });
    },
    // 操作成功回调用
    SuccessfulOperation() {
      this.submitLoad = false;
      // this.$message.success('操作成功');
      this.$emit("success");
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      this.$refs.formData.resetFields();
      this.$emit("input", false);
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$refs.formData.resetFields();
    },
    // 获取下拉数据
    getOption() {
      return new Promise((resolve) => {
        departmentTree().then((res) => {
          let departmentData = res.data;
          departmentData = [
            {
              id: "0",
              name: this.$t("Permission.PermissionUser.FirstLevelMenu"),
            },
            ...departmentData,
          ];
          this.departmentData = formatData(departmentData);
          resolve();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.department-dialog {
  .relay-only-value {
    margin-bottom: 2px;
  }
}

.system-department-form {
  &.english {
    ::v-deep .el-form-item {
      .el-form-item__label {
        font-size: 12px;
      }
    }
  }
}
</style>
